<template>
  <div class="box">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(item, index) in ItemList" :key="index">
        {{ dictionary[item] }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
import dictionary from "@/config/dictionary.json";
const route = useRoute();
const ItemList = ref();
watch(
  () => route.path,
  (newValue) => {
    const breadList = newValue.slice(1).split("/");
    ItemList.value = breadList;
  },
  {
    immediate: true,
  }
);
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>